<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<!-- bootstrap-------------------------------------------------------------------------------->

<script type="text/javascript" src="js/jquery.js"></script>
<!-- 
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/localization/messages_vi.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<!-------------------------------------------------------------------------------------------->
<style type="text/css">
span {
	color: red;
}

input {
	width: 30px;
}
</style>


<!-- Import CSS Jquery cho WYSIWYG-------------------------------------------------------------->

<link rel="shortcut icon"
	href="http://mindmup.s3.amazonaws.com/lib/img/favicon.ico">
<link href="external/google-code-prettify/prettify.css" rel="stylesheet">
<link href="css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link
	href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css"
	rel="stylesheet">
<link
	href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css"
	rel="stylesheet">

<script src="external/jquery.hotkeys.js"></script>
<script src="external/google-code-prettify/prettify.js"></script>
<link href="css/index.css" rel="stylesheet">
<script src="js/bootstrap-wysiwyg.js"></script>

<!---------------------------------------------------------------------------------------------->

<!-- Validate form data and function util------------------------------------------------------->
<script type="text/javascript">
	$(document).ready(function() {
		$("#formCompany").validate({
			errorElement : "span",
			rules : {
				companyName : {
					required : true
				},
				address : {
					required : true
				},
				contactPerson : {
					required : true
				},
				phoneNumber : {
					required : true
				},
				contactPerson : {
					required : true
				},
				contactPerson : {
					required : true
				},
				noOfWorkers : {
					number : true
				},
				noOfLine : {
					number : true
				},
				noOfMachines : {
					number : true
				},
				noOfBranches : {
					number : true
				},
				capacityOfProduct : {
					number : true
				},
			/* max_field: { max : 10 },
			range_field: { range: [4,10] },
			rangelength_field: { rangelength: [4,10] } */
			}
		});
	});

	$(window).load(
			function() {
				$.ajax({
					url : "CompanyController",
					type : "GET",
					datatype : 'json',
					success : function(data) {
						var data1 = JSON.parse(data);
						for (var i = 0; i < data1.listCompanyType.length; i++) {
							$("#typeOfProduct").append(
									"<option value="+data1.listCompanyType[i].value+">"
											+ data1.listCompanyType[i].text
											+ "</option>");
						}
					},
					error : function(data) {
						alert("Don't reload!");
					}
				});
			});
	function changeWorkShop() {
		var inpWorkShop = document.getElementById('browseWorkshopPicture');
		var i;
		for (i = 0; i < inpWorkShop.files.length; ++i) {
			var name = inpWorkShop.files.item(i).name;
		}
		document.getElementById("sizeWorkShopImage").value = i;
	}
	function changeWareHouse() {
		var inpWareHouse = document.getElementById('browseWarehousePicture');
		var j;
		for (j = 0; j < inpWareHouse.files.length; ++j) {
			var name = inpWareHouse.files.item(j).name;
		}
		document.getElementById("sizeWareHouseImage").value = j;
	}
</script>
<!-- / validate data form----------------------------------------------------------------------->
<!-- Script WYSIWYG----------------------------------------------------------------------------->
<%@ include file="contentjqueryWysiwyg.jsp"%>
<!-- /WYSIWYG ---------------------------------------------------------------------------------->
<body>
	<!-- Content -->
	<br />
	<br />
	<h2 style="text-align: center;" > Add new Company</h2>
	
	<br />
	<div style="margin-left: 20%; margin-right: 15%;">
		<div>
			<form class="form-horizontal" id="formCompany" name="formCompany"
				method="post" action="CompanyController"
				enctype="multipart/form-data">
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<p></p>
					<div class="form-group">
						<label class="col-lg-4 control-label">Company name <span
							class="mustEnter">(*)</span></label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="companyName"
								id="companyName" class="textfield" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label">Address <span
							class="mustEnter">(*)</span>
						</label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="address"
								id="address" class="textfield" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label">Phone number <span
							class="mustEnter">(*)</span></label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="phoneNumber"
								id="phoneNumber" class="textfield" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label"> Contact person <span
							class="mustEnter">(*)</span></label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="contactPerson"
								id="contactPerson" class="textfield" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label"> Types of company</label>
						<div class="col-lg-6">
							<Select class="form-control" name="typeOfProduct"
								id="typeOfProduct"></Select>
						</div>
					</div>					

					<div class="form-group">
						<label class="col-lg-4 control-label"> No. of workers</label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="noOfWorkers"
								id="noOfWorkers" class="textfield" />
						</div>
					</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<div class="form-group">
						<label class="col-lg-4 control-label"> No. of lines </label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="noOfLine"
								id="noOfLine" class="textfield" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-4 control-label"> No. of
							machines/line</label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="noOfMachines"
								id="noOfMachines" class="textfield" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-4 control-label"> No. of branches</label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="noOfBranches"
								id="noOfBranches" class="textfield" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label"> Capacity of
							products</label>
						<div class="col-lg-6">
							<input class="form-control" type="text" name="capacityOfProduct"
								id="capacityOfProduct" class="textfield" />
						</div>
					</div>

					<div class="form-group">
						<label class="col-lg-4 control-label"> Time of
							textile/Materials</label>
						<div class="col-lg-6">
							<input class="form-control" type="text"
								name="timeOfTextileMaterial" id="timeOfTextileMaterial"
								class="textfield" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label"> Time of
							textile/Material origin</label>
						<div class="col-lg-6">
							<input class="form-control" type="text"
								name="timeOfTextileMaterialorigin"
								id="timeOfTextileMaterialorigin" class="textfield" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-4 control-label"><input type="hidden"
							name="sizeWorkShopImage" id="sizeWorkShopImage" /></label>
						<div class="col-lg-6">
							<input class="form-control" type="hidden"
								name="sizeWareHouseImage" id="sizeWareHouseImage" />
						</div>
					</div>
				</div>
				<br/>
				<br/>
				<div class="form-group">
					<label class="col-lg-4 control-label"> Workshop of image</label>
					<div class="col-lg-6">
						<input type="file" accept="jpg|png" name="browseWorkshopPicture"
							id="browseWorkshopPicture" multiple onchange="changeWorkShop()" />
					</div>
				</div>

				<div class="form-group">
					<label class="col-lg-4 control-label"> Warehouse of image</label>
					<div class="col-lg-6">
						<input type="file" accept="jpg|png" name="browseWarehousePicture"
							id="browseWarehousePicture" multiple onchange="changeWareHouse()" />
					</div>
				</div>
				<!-- WYSIWYG------------------------------------------------------------------------------------------>
				<div class="container" >
					<label>Annual Financial Report</label>
					<div class="hero-unit" style="padding: 5px; width: 750px;margin-left: 25px">
						<div id="alerts"></div>
						<div class="btn-toolbar" data-role="editor-toolbar"
							data-target="#editor">
							<%@ include file="contentToolbarWysiwyg.jsp"%>
							<input type="text" data-edit="inserttext" id="voiceBtn"
								x-webkit-speech="">
						</div>

						<div id="editor" style="width: 700px; height: 150px"></div>
					</div>
				</div>
				<!----------------------------------------------------------------------------------------------------->
				<div class="form-group">
					<label class="col-lg-4 control-label"> </label> <input
						class="btn btn-success btn-default" type="submit" value="Save"
						name="submit" /> &nbsp; <input
						class="btn btn-success btn-default" type="reset" value="Reset"
						name="reset" />
				</div>

			</form>
		</div>
		<!-- Content -->
	</div>
</body>
</html>